<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            height: 5000px;
        }
    </style>
</head>
<body>
    
</body>
<script>
    // 函数防抖
    // 断时间内重复触发,最后一次生效

    // 函数节流
    // 短时间内连续触发, 降低执行的频率(降频)

    // window.onscroll = function(e){
    //     var scrollTop = document.documentElement.scrollTop;
    //     console.log("滚动条滚动ing",scrollTop);
    // }


    // 没有节流的版本  => 连续触发
    // function scrollHandler(e){
    //     var scrollTop = document.documentElement.scrollTop;
    //     console.log("滚动条滚动ing",scrollTop);
    // }

    //  window.onscroll = scrollHandler;



    // 节流版

    // var start = new Date().getTime();  // 获取当前时间对应的毫秒数(页面加载时)

    // var start = Date.now();  // 获取当前时间对应的毫秒数(页面加载时)
    // function scrollHandler(e){
    //     var now = Date.now(); // 事件触发时的当前时间
    //     if(now - start > 50){
    //         //  执行的内容 (从开始到执行 超出 300ms,如果没有超出300ms不执行)
    //         var scrollTop = document.documentElement.scrollTop;
    //         console.log("滚动条滚动ing",scrollTop);

    //         start = now; // 本次执行完毕, start=记录本次的时间 ,下次要比本次还要多 300s
    //     }
    // }

    // window.onscroll = scrollHandler;



    // 节流闭包版

   /*  window.onscroll = (function(){  // 自执行函数 =>返回新函数(滚动事件的触发函数 -> 滚动条滚动时执行)
        var start = Date.now();  // 获取当前时间对应的毫秒数(页面加载时)
        return function(e){  
            console.log("this",this);
            console.log("e",e);
            var now = Date.now(); // 事件触发时的当前时间
            if(now - start > 50){
                //  执行的内容 (从开始到执行 超出 300ms,如果没有超出300ms不执行)  -> 定死了(只能获取滚动)
                var scrollTop = document.documentElement.scrollTop;
                console.log("滚动条滚动ing",scrollTop);

                start = now; // 本次执行完毕, start=记录本次的时间 ,下次要比本次还要多 300s
            }
        }
    })();
     */
    


     // 对函数节流功能进行封装 => 可以实现对某个特定功能进行节流处理
    //  callback 需要做节流处理的函数(原函数)
    function throttle(callback,dur = 0){
        var start = Date.now();  // 获取当前时间对应的毫秒数(页面加载时)
        return function(){
            // console.log("新函数",this);
            // console.log("新函数",arguments);
            var now = Date.now(); // 事件触发时的当前时间
            if(now - start > dur){
                //  执行的内容 (从开始到执行 超出 300ms,如果没有超出300ms不执行)
                callback.apply(this,arguments);
                start = now; // 本次执行完毕, start=记录本次的时间 ,下次要比本次还要多 300s
            }
        }
    }

    function scrollHandler(){
        console.log("原函数",this);
        console.log("原函数",arguments);
        var scrollTop = document.documentElement.scrollTop;
        console.log("滚动条滚动ing",scrollTop);
    }

    // window.onscroll = scrollHandler; // 无节流版
    
    window.onscroll = throttle(scrollHandler,100); // 节流版   => 两次触发需要间隔100ms






</script>
</html>